<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h2>仪表盘</h2>
    </div>
      <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple"><ve-line :data="chartData" :settings="chartSettings"></ve-line></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"><ve-line :data="chartData" :settings="chartSettings"></ve-line></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"><ve-line :data="chartData" :settings="chartSettings"></ve-line></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"><ve-line :data="chartData" :settings="chartSettings"></ve-line>s</div>
      </el-col>
    </el-row>
      <ve-line :data="chartData" :settings="chartSettings"></ve-line>
  </el-card>
</template>

<script>
export default {
  data () {
    this.chartSettings = {
      yAxisType: ['0.[00]a', '0.[00]%'],
      axisSite: {
        right: ['下单率']
      },
      yAxisName: ['数值轴', '比率轴']
    }
    return {
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-col .bg-purple{
  height:215px;
}
/deep/.el-card__header{
  padding:10px;
}
.clearfix{
  line-height:0px;
}
.el-row {
  margin-bottom: 180px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  // background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
